<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { Menu } from "../../all/type"
import DivMenu from "./com/menu.vue"

const $router = useRouter()//路由口
//菜单列表
let listMenu = ref<any[]>([
    {
        name: '概览统计',
        url: '',
        blok: '',
        children: null,
    }, {
        name: '访客日志',
        url: '',
        blok: '',
        children: [
            {
                name: '菜单2_1',
                url: '',
                blok: '',
                children: null
            }, {
                name: '菜单2_2',
                url: '',
                blok: '',
                children: null
            }
        ]
    }, {
        name: '反馈日志',
        url: '',
        blok: '',
        children: [
            {
                name: '菜单3_1',
                url: '',
                blok: '',
                children: [
                    {
                        name: '菜单3_2_1',
                        url: '',
                        blok: '',
                        children: null
                    }, {
                        name: '菜单3_2_2',
                        url: '',
                        blok: '',
                        children: null
                    }
                ]
            }, {
                name: '菜单3_2',
                url: '',
                blok: '',
                children: null
            }
        ]
    }, {
        name: '商品订单',
        url: '',
        blok: '',
        children: null,
    }, {
        name: '商品退单',
        url: '',
        blok: '',
        children: [
            {
                name: '菜单5_1',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '菜单5_2',
                url: '',
                blok: '',
                children: [
                    {
                        name: '菜单5_2_1',
                        url: '',
                        blok: '',
                        children: null
                    }, {
                        name: '菜单5_2_2',
                        url: '',
                        blok: '',
                        children: null
                    }
                ]
            }
        ]
    }, {
        name: '交易日志',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '商品列表',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '商品规格',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '商品类别',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '产品品牌',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '小程序设置',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '小程序广告',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '小程序广播',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: 'APP端设置',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: 'APP端广告',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: 'APP端广播',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '支付设置',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '短信设置',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }, {
        name: '全局配置',
        url: '',
        blok: '',
        children: [
            {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }, {
                name: '商城订单交易日志01',
                url: '',
                blok: '',
                children: null,
            }
        ]
    }
])

//退出
const outLogin = () => {
    $router.push('/');
}
//跳转
const tapRouter = (url: any) => {
    $router.push(url);
}

//接收菜单
const onMenu = (res: any, i: number, j: number) => {
    console.log("点击菜单：", i, j, res)
    if (i == 0 && j == 0) {
        tapRouter('/home/view1')
    } else if (i == 0 && j == 1) {
        tapRouter('/home/view2')
    }
}
</script>

<template>
    <div class="home_body">
        <div class="home_menu">
            <DivMenu title="通用商城·管理系统" :data="listMenu" :onMenu="onMenu"></DivMenu>
        </div>
        <div class="home_box">
            <div class="home_top ">
                <div class="home_top_user active flex">
                    <span class="home_top_user_name">is User info</span>
                    <img class="home_top_user_img" src="../../assets/vue.svg" />
                    <span class="home_top_user_out" @click="outLogin()">退出登录</span>
                </div>
            </div>
            <div class="home_router">
                <router-view />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.home_body {
    width: 100%;
    float: left;
    display: flex;
}

.home_menu {
    max-width: 220px;
    float: left;
    background-color: #f1f1f1;
}

.home_box {
    width: 100%;
    float: left;

    /* 头部 */
    .home_top {
        width: 100%;
        height: 60px;
        float: left;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 10px 10px;
        box-sizing: border-box;

        .home_top_user {
            float: right;
            user-select: none;
            padding: 5px 5px 5px 15px;
            border-radius: 60px;
            background-color: #eeeeee99;
            position: relative;
            z-index: 1;

            .home_top_user_name {
                float: left;
                text-align: center;
                font-weight: bold;
                text-shadow: 1px 2px 3px #fff;
            }

            .home_top_user_img {
                width: 30px;
                height: 30px;
                float: left;
                padding: 5px;
                border-radius: 50px;
                margin-left: 10px;
                background-color: #f1f1f1;
            }

            .home_top_user_out {
                width: 100%;
                height: 50px;
                position: absolute;
                left: 0px;
                top: 0px;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                border-radius: 50px;
                color: #fff;
                font-weight: bold;
                text-shadow: 0px 2px 3px #000;
                background-color: #10a1f599;
                z-index: 9;
                opacity: 0;
            }

            .home_top_user_out:active {
                opacity: 1;
            }

            .home_top_user_out:hover {
                opacity: 1;
            }
        }

    }

    .home_box_arrow {
        height: 40px;
        float: left;
        margin-left: -40px;
        padding: 0px 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        background-color: #eee;
        clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    }

    /* 路由页面显示 */
    .home_router {
        width: calc(100% - 20px);
        height: calc(100vh - 80px);
        float: left;
        padding: 10px;
        margin: 10px;
        overflow: auto;
        border-radius: 10px;
        box-sizing: border-box;
        background-color: #eee;
        z-index: 1;
    }

    .active:active {
        opacity: 0.7;
    }
}
</style>
